
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="three/lib/reset.css" />
		<style type="text/css">
			#canvas {
				background: #8C8C8C;
				margin-left: 25%;
			}
		</style>
	</head>
	<body>
		<input type="button" value="开始游戏 " id="button" onclick="Game()"/>
		<canvas id="canvas" width="500px" height="500px"></canvas>
	</body>
	<script type="text/javascript">	
		var button = document.getElementById("button")
		var canvas = document.querySelector('#canvas')
		var context = canvas.getContext('2d')
		function Game(){
			var snake_body = [{
					x: 40,
					y: 40,
					color: 'black'
				}, {
					x: 60,
					y: 40,
					color: 'black'
				}, {
					x: 80,
					y: 40,
					color: 'red'
				}]
			var food_position = {
					x: 260,
					y: 180
				}
				
			window.addEventListener('keydown', function(e) {
				if(e.keyCode == 37) {
					if(snake.direction != 'right') {
						snake.direction = 'left'
					}
				} else if(e.keyCode == 39) {
					if(snake.direction != 'left') {
						snake.direction = 'right'
					}
				} else if(e.keyCode == 38) {
					if(snake.direction != 'bottom') {
						snake.direction = 'top'
					}
				} else if(e.keyCode == 40) {
					if(snake.direction != 'top') {
						snake.direction = 'bottom'
					}
				}
			})
			
			function init() {
				context.strokeStyle = '#EEEEEE'
				for(var i = 0; i < 500; i += 20) {
					context.moveTo(i, 0)
					context.lineTo(i, 500)
					context.moveTo(0, i)
					context.lineTo(500, i)
				}
				context.stroke()
				context.fillStyle = 'yellow'
				context.fillRect(food.position.x, food.position.y, 20, 20)
				snake.context = context
			}
			
			function Snake(body, direction, food, context){
				this.body = body
				this.direction = direction
				this.food = food
				this.context = context
				this.draw_snake = function(){
					var new_fastival = []
					for(var i = 0; i < this.body.length; i++) {
						this.context.fillStyle = this.body[i].color
						this.context.fillRect(this.body[i].x, this.body[i].y, 20, 20)
						new_fastival.push({
							x: this.body[i].x,
							y: this.body[i].y
						})
					}
					this.eat_food()
					this.dead(new_fastival)
				}
				this.move_snake = function(){
					var x = 0, y = 0
					if(this.direction == 'right') {
						x = 20
					} else if(this.direction == 'left') {
						x = -20
					} else if(this.direction == 'top') {
						y = -20
					} else if(this.direction == 'bottom') {
						y = 20
					}
					for(var i = 0; i < this.body.length - 1; i++) {
						this.body[i].x = this.body[i + 1].x
						this.body[i].y = this.body[i + 1].y
					}
					this.body[this.body.length - 1].x += x
					this.body[this.body.length - 1].y += y
				}
				this.eat_food = function() {
					if(this.body[this.body.length - 1].x == this.food.position.x && this.body[this.body.length - 1].y == this.food.position.y){
						this.food.random_food()
						this.add_snake_fastival()
					}
				}
				this.add_snake_fastival = function() {
					new_fastival = {
						x: this.body[0].x - 20,
						y: this.body[0].y - 20,
						color: 'black'
					}
					this.body.unshift(new_fastival);
				}
				this.dead = function(new_fastival){
					var last_fastival = this.body[this.body.length - 1]
					if(last_fastival.x == -20 || last_fastival.x == 500 || last_fastival.y == -20 || last_fastival.y == 500) {
						button.disabled=false
						clearInterval(mygame)
					}
					for(var i = 0; i < new_fastival.length; i++) {
						for(var j = i + 1; j < new_fastival.length; j++) {
							if(new_fastival[i].x == new_fastival[j].x && new_fastival[i].y == new_fastival[j].y) {
								button.disabled=false
								clearInterval(mygame)
							}
						}
					}
				}
			}
			
			function Food(position,Snake){
				this.position = position;
				this.random_food = function(){
					this.position = {
						x: ~~(Math.random() * (500 / 20)) * 20,
						y: ~~(Math.random() * (500 / 20)) * 20
					}
				}
                this.live = function(snake){
                    if(snake.position == this.position){
                        alert("hah");
                    }
                }
			}
		
			food = new Food(food_position)
			snake = new Snake(snake_body, 'right', food, context)
			mygame = setInterval(function(){
				context.clearRect(0, 0, 500, 500)
				init()
				snake.draw_snake()
				snake.move_snake()
			}, 120)
			button.disabled = true
		}
	</script>
</html>
